<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-热身课程</title>
	<style>
		#div1{ 
			width:200px; 
			height:200px; 
			background:red; 
			display:none; 
		}
		#txt{
			font-weight:bold;
			cursor:pointer;
		}
	</style>
	<script>
	window.onload = function (){
		var oBtn1 = document.getElementById('show_btn');
		var oBtn2 = document.getElementById('hide_btn');
		var oDiv = document.getElementById('div1');
		var oTxt = document.getElementById('txt');
		
		oTxt.onclick = show;

		oBtn1.onclick = show;
		function show(){
			oDiv.style.display = 'block';
			oDiv.style.width = '300px';
			oDiv.style.background = 'yellow';
		};
		oBtn2.onclick = function (){
			oDiv.style.display = 'none';
		};
	};
</script>
</head>
<body>
	<input id="show_btn" type="button" value="显示" />
	<input id="hide_btn" type="button" value="隐藏" />
	<span id="txt">我也要让它显示~~</span>
	<div id="div1"></div>
</body>
</html>